<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="description" content="Bootstrap Admin App + jQuery"/>
    <meta name="keywords" content="app, responsive, jquery, vue-bootstrap, dashboard, admin"/>
    <title th:replace="${title}">The awesome application</title>

    <!-- Common styles and scripts -->

    <!-- =============== VENDOR STYLES ===============-->
    <!-- FONT AWESOME-->
    <link rel="stylesheet" th:href="@{/admin-ui/plugins/fontawesome/css/font-awesome.min.css}" type="text/css"/>
    <!-- SIMPLE LINE ICONS-->
    <link rel="stylesheet" th:href="@{/admin-ui/plugins/simple-line-icons/css/simple-line-icons.css}" type="text/css"/>
    <!-- ANIMATE.CSS-->
    <link rel="stylesheet" th:href="@{/admin-ui/plugins/animate.css/animate.min.css}" type="text/css"/>
    <!-- WHIRL (spinners)-->
    <link rel="stylesheet" th:href="@{/admin-ui/plugins/whirl-master/dist/whirl.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/admin-ui/plugins/DataTables-1.10.16/datatables.min.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/admin-ui/plugins/DataTables-1.10.16/css/dataTables.bootstrap.css}" type="text/css"/>
    <!-- =============== BOOTSTRAP STYLES ===============-->
    <link rel="stylesheet" th:href="@{/admin-ui/css/vue-bootstrap.css}" type="text/css"/>
    <link rel="stylesheet" th:href="@{/admin-ui/css/bootstrap.css}" id="bscss" type="text/css"/>
    <!--/* Per-page placeholder for additional links */-->
    <th:block th:replace="${links}" />
</head>
<body>

<th:block th:fragment="header">
    <!-- top navbar-->
    <header class="topnavbar-wrapper">
        <!-- START Top Navbar-->
        <nav role="navigation" class="navbar topnavbar">
            <!-- START navbar header-->
            <div class="navbar-header">
                <a href="#/" class="navbar-brand">
                    <div class="brand-logo">
                        <img src="images/logo.png" alt="App Logo" class="img-responsive"/>
                    </div>
                    <div class="brand-logo-collapsed">
                        <img src="images/logo-single.png" alt="App Logo" class="img-responsive"/>
                    </div>
                </a>
            </div>
            <!-- END navbar header-->
            <!-- START Nav wrapper-->
            <div class="nav-wrapper">
                <!-- START Left navbar-->
                <ul class="nav navbar-nav">
                    <li>
                        <!-- Button used to collapse the left sidebar. Only visible on tablet and desktops-->
                        <a href="#" data-toggle-state="aside-collapsed" class="hidden-xs">
                            <em class="fa fa-navicon"></em>
                        </a>
                        <!-- Button to show/hide the sidebar on mobile. Visible on mobile only.-->
                        <a href="#" data-toggle-state="aside-toggled" data-no-persist="true" class="visible-xs sidebar-toggle">
                            <em class="fa fa-navicon"></em>
                        </a>
                    </li>
                    <!-- START lock screen-->
                    <li>
                        <a href="lock.html" title="Lock screen">
                            <em class="icon-lock"></em>
                        </a>
                    </li>
                    <!-- END lock screen-->
                </ul>
                <!-- END Left navbar-->
                <!-- START Right Navbar-->
                <ul class="nav navbar-nav navbar-right">

                    <!-- Fullscreen (only desktops)-->
                    <li class="visible-lg">
                        <a href="#" data-toggle-fullscreen="">
                            <em class="fa fa-expand"></em>
                        </a>
                    </li>
                    <li class="dropdown dropdown-list">
                        <a href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <em class="icon-bell"></em>
                            <div class="label label-danger">66</div>
                        </a>
                        <!-- START Dropdown menu-->
                        <ul class="dropdown-menu animated flipInX">
                            <li>
                                <!-- START list group-->
                                <div class="list-group">
                                    <!-- list item-->
                                    <a href="#" class="list-group-item">
                                        <div class="media-box">
                                            <div class="pull-left">
                                                <em class="fa fa-twitter fa-2x text-info"></em>
                                            </div>
                                            <div class="media-box-body clearfix">
                                                <p class="m0">New followers</p>
                                                <p class="m0 text-muted">
                                                    <small>1 new follower</small>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                    <!-- list item-->
                                    <a href="#" class="list-group-item">
                                        <div class="media-box">
                                            <div class="pull-left">
                                                <em class="fa fa-envelope fa-2x text-warning"></em>
                                            </div>
                                            <div class="media-box-body clearfix">
                                                <p class="m0">New e-mails</p>
                                                <p class="m0 text-muted">
                                                    <small>You have 10 new emails</small>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                    <!-- list item-->
                                    <a href="#" class="list-group-item">
                                        <div class="media-box">
                                            <div class="pull-left">
                                                <em class="fa fa-tasks fa-2x text-success"></em>
                                            </div>
                                            <div class="media-box-body clearfix">
                                                <p class="m0">Pending Tasks</p>
                                                <p class="m0 text-muted">
                                                    <small>11 pending task</small>
                                                </p>
                                            </div>
                                        </div>
                                    </a>
                                    <!-- last list item-->
                                    <a href="#" class="list-group-item">
                                        <small>More notifications</small>
                                        <span class="label label-danger pull-right">14</span>
                                    </a>
                                </div>
                                <!-- END list group-->
                            </li>
                        </ul>
                        <!-- END Dropdown menu-->
                    </li>
                    <!-- 退出登录 -->
                    <li>
                        <a href="#" data-logout="" title="退出登录">
                            <em class="icon-logout"></em>
                        </a>
                    </li>
                    <!-- START Offsidebar button-->
                    <li>
                        <a href="#" data-toggle-state="offsidebar-open" data-no-persist="true">
                            <em class="icon-notebook"></em>
                        </a>
                    </li>
                    <!-- END Offsidebar menu-->
                </ul>
                <!-- END Right Navbar-->
            </div>
            <!-- END Nav wrapper-->
        </nav>
        <!-- END Top Navbar-->
    </header>
</th:block>


<th:block th:fragment="sidebar">
    <aside class="aside">
        <!-- START Sidebar (left)-->
        <div class="aside-inner">
            <nav data-sidebar-anyclick-close="" class="sidebar">
                <!-- START sidebar nav-->
                <nav-view v-bind:items="menuList"></nav-view>
                <!-- END sidebar nav-->
            </nav>
        </div>
        <!-- END Sidebar (left)-->
    </aside>
</th:block>
<!-- offsidebar-->
<th:block th:fragment="offsidebar">
    <aside class="offsidebar hide">
    <!-- START Off Sidebar (right)-->
    <nav>
        <div role="tabpanel">
            <!-- Nav tabs-->
            <ul role="tablist" class="nav nav-tabs nav-justified">
                <li role="presentation" class="active">
                    <a href="#app-settings" aria-controls="app-settings" role="tab" data-toggle="tab">
                        <em class="icon-equalizer fa-lg"></em>
                    </a>
                </li>
                <li role="presentation">
                    <a href="#app-chat" aria-controls="app-chat" role="tab" data-toggle="tab">
                        <em class="icon-user fa-lg"></em>
                    </a>
                </li>
            </ul>
            <!-- Tab panes-->
            <div class="tab-content">
                <div id="app-settings" role="tabpanel" class="tab-pane fade in active">
                    <h3 class="text-center text-thin">主题设置</h3>
                    <div class="p">
                        <h4 class="text-muted text-thin">Themes</h4>
                        <div class="table-grid mb">
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-a.css">
                                        <input type="radio" name="setting-theme" checked="checked"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-info"></span>
                                       <span class="color bg-info-light"></span>
                                    </span>
                                        <span class="color bg-white"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-b.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-green"></span>
                                       <span class="color bg-green-light"></span>
                                    </span>
                                        <span class="color bg-white"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-c.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-purple"></span>
                                       <span class="color bg-purple-light"></span>
                                    </span>
                                        <span class="color bg-white"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-d.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-danger"></span>
                                       <span class="color bg-danger-light"></span>
                                    </span>
                                        <span class="color bg-white"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="table-grid mb">
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-e.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-info-dark"></span>
                                       <span class="color bg-info"></span>
                                    </span>
                                        <span class="color bg-gray-dark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-f.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-green-dark"></span>
                                       <span class="color bg-green"></span>
                                    </span>
                                        <span class="color bg-gray-dark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-g.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-purple-dark"></span>
                                       <span class="color bg-purple"></span>
                                    </span>
                                        <span class="color bg-gray-dark"></span>
                                    </label>
                                </div>
                            </div>
                            <div class="col mb">
                                <div class="setting-color">
                                    <label data-load-css="css/themes/theme-h.css">
                                        <input type="radio" name="setting-theme"/>
                                        <span class="icon-check"></span>
                                        <span class="split">
                                       <span class="color bg-danger-dark"></span>
                                       <span class="color bg-danger"></span>
                                    </span>
                                        <span class="color bg-gray-dark"></span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="p">
                        <h4 class="text-muted text-thin">Layout</h4>
                        <div class="clearfix">
                            <p class="pull-left">Fixed</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-fixed" type="checkbox" data-toggle-state="layout-fixed"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="clearfix">
                            <p class="pull-left">Boxed</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-boxed" type="checkbox" data-toggle-state="layout-boxed"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="clearfix">
                            <p class="pull-left">RTL</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-rtl" type="checkbox"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="p">
                        <h4 class="text-muted text-thin">Aside</h4>
                        <div class="clearfix">
                            <p class="pull-left">Collapsed</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-collapsed" type="checkbox" data-toggle-state="aside-collapsed"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="clearfix">
                            <p class="pull-left">Collapsed Text</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-collapsed-text" type="checkbox" data-toggle-state="aside-collapsed-text"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="clearfix">
                            <p class="pull-left">Float</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-float" type="checkbox" data-toggle-state="aside-float"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="clearfix">
                            <p class="pull-left">Hover</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input th:id="chk-hover" type="checkbox" data-toggle-state="aside-hover"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                        <div class="clearfix">
                            <p class="pull-left">Show Scrollbar</p>
                            <div class="pull-right">
                                <label class="switch">
                                    <input id="chk-scrollbar" type="checkbox" data-toggle-state="show-scrollbar" data-target=".sidebar"/>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>

                </div>
                <div id="app-chat" role="tabpanel" class="tab-pane fade">
                    <h3 class="text-center text-thin">Tab 2</h3>
                </div>
            </div>
        </div>
    </nav>
    <!-- END Off Sidebar (right)-->
</aside>
</th:block>
<th:block th:fragment="footer">
    <footer >
        <span>&copy; 2017 - Angle</span>
    </footer>
</th:block>


<th:block th:fragment="commonScript">
    <!-- =============== VENDOR SCRIPTS ===============-->
    <!-- MODERNIZR-->
    <script type="application/javascript" th:src="@{/admin-ui/plugins/modernizr/modernizr.custom.js}"></script>
    <script type="application/javascript" th:src="@{/admin-ui/js/vue-bootstrap.js}" ></script>
    <!-- STORAGE API-->
    <script type="application/javascript" th:src="@{/admin-ui/plugins/jQuery-Storage-API/jquery.storageapi.js}"></script>
    <!-- JQUERY EASING-->
    <script type="application/javascript" th:src="@{/admin-ui/plugins/jquery.easing/js/jquery.easing.js}"></script>
    <!-- ANIMO-->
    <script type="application/javascript" th:src="@{/admin-ui/plugins/animo.js/animo.js}"></script>
    <!-- SCREENFULL-->
    <script type="application/javascript" th:src="@{/admin-ui/plugins/screenfull/dist/screenfull.js}"></script>
    <!-- LOCALIZE-->
    <script type="application/javascript" th:src="@{/admin-ui/plugins/jquery-localize-master/dist/jquery.localize.min.js}"></script>
    <script type="application/javascript" th:src="@{/admin-ui/plugins/jquery.cookie.js/jquery.cookie.js}"></script>
    <script type="application/javascript" th:src="@{/admin-ui/plugins/DataTables-1.10.16/datatables.min.js}"></script>
    <script type="application/javascript" th:src="@{/admin-ui/plugins/DataTables-1.10.16/js/dataTables.bootstrap.js}"></script>
    <!-- =============== PAGE VENDOR SCRIPTS ===============-->
    <!-- =============== APP SCRIPTS ===============-->
    <script type="application/javascript" th:src="@{/admin-ui/js/demo-rtl.js}"></script>
    <script type="application/javascript" th:src="@{/admin-ui/js/app.js}"></script>
    <script type="application/javascript" th:src="@{/admin-ui/js/common.js}"></script>
</th:block>
</body>
</html>

